<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 头部区域 新增试题按钮 -->
        <el-row>
          <el-col :span="22"><div class="bg-color">说明：目前支持学科和关键字条件筛选</div></el-col>
          <el-col :span="2"><el-button type="success" size="small" icon="el-icon-edit" @click="$router.push('new')">新增试题</el-button></el-col>
        </el-row>
        <!-- form 表单区域 -->
        <el-form label-width="80px" v-model="form" style="margin-top:10px">
          <!-- 第一行 -->
          <el-row>
            <!-- 学科下拉菜单 -->
            <el-col :span="6">
              <el-form-item label="学科">
                <el-select v-model="form.subjectID" placeholder="请选择" size="small" style="width:100%" @focus="getSubjectList" @change="getList(form.subjectID)">
                  <el-option
                  v-for="item in subjectList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                  </el-option>
              </el-select>
            </el-form-item>
            </el-col>
            <!-- 二级目录下拉菜单 -->
            <el-col :span="6">
              <el-form-item label="二级目录">
                <el-select v-model="form.catalogID" placeholder="请选择" size="small" style="width:100%">
                  <el-option
                  v-for="item in directoryList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 标签下拉菜单 -->
            <el-col :span="6">
              <el-form-item label="标签">
                <el-select v-model="form.tags" placeholder="请选择" size="small"  style="width:100%">
                  <el-option
                  v-for="item in tagsList"
                  :key="item.id"
                  :label="item.tagName"
                  :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 关键字输入框 -->
            <el-col :span="6">
              <el-form-item label="关键字">
                <el-input v-model="form.keyword" placeholder="请输入内容" size="small"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第二行 -->
          <el-row>
            <!-- 试题类型下拉菜单 -->
            <el-col :span="6">
              <el-form-item label="试题类型">
                <el-select v-model="form.questionType" placeholder="请选择" size="small" style="width:100%">
                  <el-option
                  v-for="item in typelist"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 难度下拉菜单 -->
            <el-col :span="6">
              <el-form-item label="难度">
                <el-select v-model="form.difficulty" placeholder="请选择" size="small" style="width:100%">
                  <el-option
                  v-for="item in difficultyList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 方向下拉菜单 -->
            <el-col :span="6">
              <el-form-item label="方向">
                <el-select v-model="form.direction" placeholder="请选择" size="small" style="width:100%">
                  <el-option
                  v-for="item in directList"
                  :key="item"
                  :label="item"
                  :value="item">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 录入人下拉菜单 -->
            <el-col :span="6">
              <el-form-item label="录入人">
                <el-select v-model="form.creatorID" placeholder="请选择" size="small" style="width:100%" @focus="getCreatorList">
                  <el-option
                  v-for="item in creatorList"
                  :key="item.id"
                  :label="item.username"
                  :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 第三行 -->
          <el-row>
            <!-- 题目备注输入框 -->
            <el-col :span="6">
              <el-form-item label="题目备注">
                <el-input v-model="form.remarks" placeholder="请输入内容" size="small"></el-input>
              </el-form-item>
            </el-col>
            <!-- 企业简称输入框 -->
            <el-col :span="6">
              <el-row>
                <el-form-item label="企业简介">
                  <el-input v-model="form.enterpriseID" placeholder="请输入内容" size="small" style="width:100%"></el-input>
                </el-form-item>
              </el-row>
            </el-col>
            <!-- 城市下拉菜单 -->
            <el-col :span="6">
              <el-form-item label="城市">
                <el-row>
                  <el-col :span="12">
                    <el-select v-model="form.province" placeholder="请选择" size="small" style="width:100%" @change="getCityList(form.province)">
                      <el-option
                        v-for="item in provinceList"
                        :key="item"
                        :label="item.city"
                        :value="item">
                      </el-option>
                    </el-select>
                  </el-col>
                  <el-col :span="12">
                    <el-select v-model="form.area" placeholder="请选择" size="small" style="width:100%">
                      <el-option
                        v-for="item in areaList"
                        :key="item"
                        :label="item"
                        :value="item">
                      </el-option>
                    </el-select>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :span="6" style="text-align:right">
              <el-button size="small" @click="resetForm">清除</el-button>
              <el-button type="primary" size="small" @click="search">搜索</el-button>
            </el-col>
          </el-row>
        </el-form>
        <!-- 提示框区域 -->
        <el-row>
          <div class="toast">
            <i class="el-icon-info"></i>&nbsp;&nbsp;数据一共{{total}}条
          </div>
        </el-row>
        <!-- 表格区域 -->
        <el-table
          :data="list"
          style="width: 100%">
          <el-table-column
            prop="number"
            label="试题编号"
            width="150">
          </el-table-column>
          <el-table-column
            prop="subject"
            label="学科"
            width="100">
          </el-table-column>
          <el-table-column
            prop="catalogID"
            label="目录"
            width="100">
          </el-table-column>
          <el-table-column
            prop="questionType"
            label="题型"
            width="100">
            <template #default="{ row }">
              {{hire2Enum[+row.questionType]}}
            </template>
          </el-table-column>
          <el-table-column
            prop="question"
            label="题干"
            width="200">
            <template #default="{ row }">
              <div v-html="row.question"></div>
            </template>
          </el-table-column>
          <el-table-column
            prop="addDate"
            label="录入时间"
            width="200">
            <template #default="{ row }">
              {{formatDate(row.addDate)}}
            </template>
          </el-table-column>
          <el-table-column
            prop="difficulty"
            label="难度"
            width="80">
            <template #default="{ row }">
              {{hireEnum[+row.difficulty]}}
            </template>
          </el-table-column>
          <el-table-column
            prop="creator"
            label="录入人"
            width="100">
          </el-table-column>
          <el-table-column
            label="操作">
            <template #default="{ row }">
              <el-button type="success" icon="el-icon-view" circle size="small" @click="showDialog(row)"></el-button>&nbsp;&nbsp;
              <el-button type="primary" icon="el-icon-edit" circle size="small" @click="update(row)"></el-button>&nbsp;&nbsp;
              <el-button type="success" icon="el-icon-delete" circle size="small" @click="deleteQuestion(row)"></el-button>&nbsp;&nbsp;
              <el-button type="danger" icon="el-icon-check" circle size="small" @click="addChioce(row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-row type="flex" justify="end" style="margin-top:10px">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[2, 5, 10, 20, 50]"
            :page-size="pagesize"
            layout="prev, pager, next, sizes, jumper"
            :total="total">
          </el-pagination>
        </el-row>
        <!-- 题目预览描述列表 -->
        <el-dialog
          title="题目预览"
          :visible="dialogVisible"
          width="60%"
          @close="closeDialog">
          <questions-preview :detailForm="detailForm" :hireEnum="hireEnum" :hire2Enum="hire2Enum" @closeDialog="closeDialog" ref="previewsRef"></questions-preview>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>

import { list as getQuestionsList, remove, choiceAdd, detail } from '@/api/hmmm/questions.js'
import { simple as getSubjectList } from '@/api/hmmm/subjects.js'
import { simple as getDirectoryList } from '@/api/hmmm/directorys.js'
import { list as getTagsList } from '@/api/hmmm/tags.js'
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
import { list as getCreatorList } from '@/api/base/users.js'
import { provinces, citys } from '@/api/hmmm/citys'
import questionsPreview from '../components/questions-preview.vue'
// 导入dayjs处理录入时间格式
import dayjs from 'dayjs'
export default {
  components: {
    questionsPreview
  },
  data () {
    return {
      form: {
        subjectName: '', // 学科
        catalogID: '', // 目录
        tags: '', // 标签
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 录入人
        remarks: '', // 试题备注
        enterpriseID: '', // 企业简介
        province: '', // 省份
        area: '' // 区域
      },
      // 学科列表数据
      subjectList: [],
      // 二级目录列表数据
      directoryList: [],
      // 标签列表数据
      tagsList: [],
      // 试题类型
      typelist: questionType,
      // 难度数据
      difficultyList: difficulty,
      // 方向的数组数据
      directList: direction,
      // 录入人列表数据
      creatorList: [],
      // 城市列表数据
      provinceList: provinces(),
      // 区域列表数据
      areaList: citys(this.province),
      // 表格渲染数据
      list: [],
      // 当前页数
      page: 1,
      pagesize: 10,
      total: 0,
      hireEnum: {
        1: '简单',
        2: '一般',
        3: '困难'
      },
      // 试题类型枚举
      hire2Enum: {
        1: '单选题',
        2: '多选题',
        3: '简答题'
      },
      // 控制预览弹框的显示与隐藏
      dialogVisible: false,
      // 详情表单数据
      detailForm: {}
    }
  },
  created () {
    // 页面一开始渲染数据
    this.renderTable()
  },
  methods: {
    // 学科列表数据
    async getSubjectList () {
      const res = await getSubjectList()
      this.subjectList = res.data
    },
    // 学科发生改变时获取对应的二级渲染目录和标签数据
    async getList (id) {
      this.form.catalogID = this.form.tags = ''
      // 获取二级目录
      const res = await getDirectoryList({ subjectID: id })
      this.directoryList = res.data
      // 获取标签数据
      const res2 = await getTagsList({ subjectID: id })
      this.tagsList = res2.data.items
    },
    /* // 根据学科获取数据渲染二级目录数据
    async getDirectoryList (val) {
      const res = await getDirectoryList({ subjectID: val })
      this.directoryList = res.data
    },
    // 根据学科数据渲染标签数据
    async getTagsList (val) {
      const res = await getTagsList({ subjectID: val })
      this.tagsList = res.data.items
    }, */
    // 根据录入人数据渲染下拉菜单
    async getCreatorList () {
      const res = await getCreatorList()
      // console.log(res.data)
      this.creatorList = res.data.list
    },
    // 城市发生改变时，获取对应的区域列表
    getCityList (val) {
      this.areaList = citys(val)
    },
    // 表格数据渲染函数
    async renderTable () {
      const res = await getQuestionsList({
        page: this.page,
        pagesize: this.pagesize
      })
      // console.log(res.data)
      this.list = res.data.items
      this.total = res.data.counts
    },
    // 点击修改试题按钮，跳转试题录入即可
    update (id) {
      this.$router.push({
        path: 'new',
        query: { id: id }
      })
    },
    // 点击删除试题按钮
    deleteQuestion (id) {
      // 弹出对话框
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 调用接口
        await remove(id)
        // 提示用户
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        // 更新列表
        this.renderTable()
      })
    },
    // 加入精选
    addChioce (data) {
      // 弹出对话框
      this.$confirm('此操作将改题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info'
      }).then(async () => {
        await choiceAdd({
          id: data.id,
          choiceState: 1
        })
        // 提示用户
        this.$message.success('加入精选成功')
        // 跳转页面
        this.$router.push('choice')
      })
    },
    // 分页器每页条数发生改变时触发
    handleSizeChange (val) {
      // val 为每页展示多少条数据
      // console.log(val)
      this.pagesize = val
      this.page = 1
      this.renderTable()
    },
    // 当前页数发生改变时触发
    handleCurrentChange (page) {
      // console.log(page)
      // 根据获取的页面值重新渲染列表数据
      this.page = page
      this.renderTable()
    },
    // 录入时间转换方法
    formatDate (data) {
      return dayjs(data).format('YYYY-MM-DD HH:mm:ss')
    },
    // 点击预览按钮弹出弹窗
    async showDialog (data) {
      this.dialogVisible = true
      // 根据id获取当前数据的信息
      const res = await detail(data)
      this.detailForm = res.data
    },
    // 弹窗关闭执行的方法
    closeDialog () {
      this.dialogVisible = false
      this.$refs.previewsRef.isShow = false
    },
    // 点击清除按钮，清空表单中的数据项
    resetForm () {
      this.form = {}
      this.renderTable()
    },
    // 点击搜索按钮，筛选数据
    async search () {
      if (this.form.subjectID !== '' || this.form.keyword !== '') {
        const res = await getQuestionsList({
          page: 1,
          pagesize: 100,
          keyword: this.form.keyword,
          subjectID: this.form.subjectID
        })
        // console.log(res)
        this.list = res.data.items
        this.total = res.data.counts
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container{
  .app-container{
    font-size: 14px;
    .bg-color{
    font-size: 12px;
    color: rgb(253, 166, 166);
    }
    .toast{
      padding-left: 15px;
      background-color: #f4f3f3;
      height: 30px;
      line-height: 30px;
      border-radius: 5px;
      color: #a2a0a0;
    }
  }
}

</style>
